{% extends 'bike/base.html' %}

{% block title %}自行车列表 - 自行车管理系统{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2><i class="bi bi-list-ul"></i> 自行车列表</h2>
            <!-- <span class="badge bg-primary fs-6">共 {{ total_count }} 辆自行车</span> -->
        </div>

        <!-- 搜索和筛选表单 -->
        <div class="search-form">
            <form method="get" class="row g-3">
                <div class="col-md-4">
                    <label for="search" class="form-label">搜索</label>
                    <input type="text" class="form-control" id="search" name="search" 
                           value="{{ search }}" placeholder="搜索编号、姓名、学号、型号...">
                </div>
                <div class="col-md-3">
                    <label for="category" class="form-label">类别</label>
                    <select class="form-select" id="category" name="category">
                        <option value="">全部类别</option>
                        {% for value, label in categories %}
                        <option value="{{ value }}" {% if category == value %}selected{% endif %}>{{ label }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-3">
                    <label for="college" class="form-label">学院</label>
                    <select class="form-select" id="college" name="college">
                        <option value="">全部学院</option>
                        {% for value, label in colleges %}
                        <option value="{{ value }}" {% if college == value %}selected{% endif %}>{{ label }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">&nbsp;</label>
                    <div class="d-grid">
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-search"></i> 搜索
                        </button>
                    </div>
                </div>
            </form>
        </div>

        <!-- 自行车列表 -->
        <div class="card">
            <div class="card-body">
                {% if page_obj %}
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>编号</th>
                                <th>所有人</th>
                                <th>学号</th>
                                <th>型号</th>
                                <th>类别</th>
                                <th>学院</th>
                                <th>班级</th>
                                <th>联系电话</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for bike in page_obj %}
                            <tr>
                                <td>
                                    <span class="fw-bold text-primary">{{ bike.bike_number }}</span>
                                </td>
                                <td>{{ bike.owner_name }}</td>
                                <td>{{ bike.owner_student_id|default:"-" }}</td>
                                <td>{{ bike.model }}</td>
                                <td>
                                    <span class="badge bg-info">{{ bike.get_category_display }}</span>
                                </td>
                                <td>
                                    <span class="badge bg-secondary">{{ bike.get_college_display }}</span>
                                </td>
                                <td>{{ bike.class_name|default:"-" }}</td>
                                <td>{{ bike.phone_number|default:"-" }}</td>
                                <td>
                                    <a href="{% url 'bike:bike_detail' bike.id %}" class="btn btn-sm btn-outline-primary">
                                        <i class="bi bi-eye"></i> 查看
                                    </a>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                <!-- 分页 -->
                {% if page_obj.has_other_pages %}
                <nav aria-label="分页导航" class="mt-4">
                    <ul class="pagination justify-content-center">
                        <!-- 首页 -->
                        {% if page_obj.has_previous %}
                        <li class="page-item">
                            <a class="page-link" href="?page=1{% if search %}&search={{ search }}{% endif %}{% if category %}&category={{ category }}{% endif %}{% if college %}&college={{ college }}{% endif %}">
                                <i class="bi bi-chevron-double-left"></i> 首页
                            </a>
                        </li>
                        {% endif %}

                        <!-- 上一页 -->
                        {% if page_obj.has_previous %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if search %}&search={{ search }}{% endif %}{% if category %}&category={{ category }}{% endif %}{% if college %}&college={{ college }}{% endif %}">
                                <i class="bi bi-chevron-left"></i> 上一页
                            </a>
                        </li>
                        {% endif %}

                        <!-- 页码显示 -->
                        {% for num in page_obj.paginator.page_range %}
                            {% if page_obj.number == num %}
                            <li class="page-item active">
                                <span class="page-link">{{ num }}</span>
                            </li>
                            {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ num }}{% if search %}&search={{ search }}{% endif %}{% if category %}&category={{ category }}{% endif %}{% if college %}&college={{ college }}{% endif %}">{{ num }}</a>
                            </li>
                            {% endif %}
                        {% endfor %}

                        <!-- 下一页 -->
                        {% if page_obj.has_next %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if search %}&search={{ search }}{% endif %}{% if category %}&category={{ category }}{% endif %}{% if college %}&college={{ college }}{% endif %}">
                                下一页 <i class="bi bi-chevron-right"></i>
                            </a>
                        </li>
                        {% endif %}

                        <!-- 末页 -->
                        {% if page_obj.has_next %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if search %}&search={{ search }}{% endif %}{% if category %}&category={{ category }}{% endif %}{% if college %}&college={{ college }}{% endif %}">
                                末页 <i class="bi bi-chevron-double-right"></i>
                            </a>
                        </li>
                        {% endif %}
                    </ul>
                    
                    <!-- 分页信息 -->
                    <div class="text-center text-muted small mt-2">
                        显示第 {{ page_obj.start_index }} - {{ page_obj.end_index }} 条，共 {{ page_obj.paginator.count }} 条记录
                        （第 {{ page_obj.number }} 页，共 {{ page_obj.paginator.num_pages }} 页）
                    </div>
                </nav>
                {% endif %}

                {% else %}
                <div class="text-center py-5">
                    <i class="bi bi-bicycle display-1 text-muted"></i>
                    <h4 class="text-muted mt-3">暂无自行车信息</h4>
                    <p class="text-muted">请联系管理员添加自行车信息或调整搜索条件</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}
